import { reactive, ref } from "vue";
<% if(locals.api){ %>
import { I<%= funcName.slice(0, 1).toUpperCase() + funcName.slice(1) %>Result } from "./api";
<% } else { %>
import { I<%= fetchName.slice(0, 1).toUpperCase() + fetchName.slice(1) %>Result } from "./api";
<% } %>
<% if(!locals.api){ %>
interface ITableListItem {
	<% columns.map((item, index) => { _%>
			/**
		* <%= item.title %>
		*/
		<%= item.key || `column${index+1}` %>: string;
	<% }) _%>
	/**
   * 接口返回的数据，新增字段不需要改 ITableListItem 直接从这里取
   */
	apiResult: I<%= fetchName.slice(0, 1).toUpperCase() + fetchName.slice(1) %>Result<%- result %>[0]
}
<% } %>
interface IFormData {
	<% filters.map(item => { _%>
		/**
		* <%= item.label %>
		*/
		<% if(item.component === "range-picker") { _%>
			<%= item.key %>?: string[];
		<% } _%>
		<% if(item.component !== "range-picker") { _%>
			<%= item.key %>?: string;
		<% } _%>
	<% }) _%>
}
<% if(filters.some(s => s.component === "select" )){ %>
interface IOptionItem {
  label: string;
  value: string;
}

interface IOptions {
  <% filters.filter(s => s.component === "select").map(item => { _%>
	<%= item.key %>: IOptionItem[],
  <% }) _%>
}

const defaultOptions: IOptions = {
	<% filters.filter(s => s.component === "select").map(item => { _%>
		<%= item.key %>: [],
	<% }) _%>
};
<% } %>
export const defaultFormData: IFormData = {
	<% filters.map(item => { _%>
		<%= item.key %>: undefined,
	<% }) _%>
};

export const useModel = () => {
  const filterForm = reactive<IFormData>({ ...defaultFormData });
	<% if(filters.some(s => s.component === "select" )){ %>
  		const options = reactive<IOptions>({ ...defaultOptions });
	<% } %>
	<% if(locals.api){ _%>
		const tableList = ref<(I<%= funcName.slice(0, 1).toUpperCase() + funcName.slice(1) %>Result<%- result %>[0] & { _?: unknown })[]>(
			[],
		);
	<% } else { _%>
		const tableList = ref<(ITableListItem & { _?: unknown })[]>(
			[],
		);
	<% } _%>
	<% if(pagination.show) { %>
		const pagination = reactive<{
			page: number;
			pageSize: number;
			total: number;
		}>({
			page: 1,
			pageSize: 10,
			total: 0,
		});
	<% } %>
  const loading = reactive<{ list: boolean }>({
    list: false,
  });
  <% if(includeModifyModal) { %>
	const modalInfo = reactive<{
		visible: boolean;
		title: string;
		id?: number;
		action: "add" | "edit" | "view";
	}>({
		visible: false,
		title: "",
		action: "add",
	});
  <% } %>
  return {
    filterForm,
		<% if(filters.some(s => s.component === "select" )){ _%>
    options,
		<% } _%>
    tableList,
		<% if(pagination.show) { _%>
		pagination,
		<% } _%>
			loading,
		<% if(includeModifyModal) { _%>
		modalInfo,
		<% } _%>
  };
};

export type Model = ReturnType<typeof useModel>;
